import React, { useState, useEffect } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Button, Flex, Layout, Menu, theme, MenuProps } from "antd";
import "./Home.less";
import { getEnumList } from "@/services/Enum";
import { history } from "umi";

type MenuItem = Required<MenuProps>["items"][number];

const { Header, Sider, Content } = Layout;

const Home: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const [enumList, setEnumList] = useState<any>([]);
  const fetchEnumList = async () => {
    const res = await getEnumList();
    setEnumList(res.data);
  };
  const menuItems = enumList.map((item: any, index: number) => {
    return {
      key: item.id,
      label: item.meta.title,
      children: item.children.map((child: any) => {
        return {
          key: child.path,
          label: child.meta.title,
        };
      }),
    };
  });
  const Home = {
    key: "/index",
    label: "首页",
  };

  const items: MenuItem[] = [Home, ...menuItems];
  const onMenuClick = (item: any) => {
    if (item.key === "/index") {
      history.push(`${item.keyPath[0]}`);
      console.log(1);
    } else {
      history.push(`${item.keyPath[1]}/${item.keyPath[0]}`);
    }
  };

  useEffect(() => {
    fetchEnumList();
  }, []);
  return (
    <Flex
      gap="middle"
      wrap="wrap"
      style={{
        minHeight: "100vh",
      }}
    >
      <Layout style={{ width: "100vw", height: "100vh" }}>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="demo-logo-vertical" />
          <Menu
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            theme="dark"
            mode="inline"
            items={items}
            onClick={onMenuClick}
          />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: "16px",
                width: 64,
                height: 64,
              }}
            />
          </Header>
          <Content
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    </Flex>
  );
};

export default Home;
